<template>
  <div class="bg-white">
    <div class="banxin mx-auto max-lg:p-[1rem]">
      <!-- 面包屑 -->
      <div class="lg:py-[1.125rem] max-lg:py-[.75]">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: localePath('/news') }" class="capitalize">
            {{ $t('pages.home') }}
          </el-breadcrumb-item>
          <el-breadcrumb-item class="capitalize">
            {{ $t('pages.newsList') }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="lg:py-[2.5rem] flex flex-col max-lg:py-[1rem] max-lg:mt-[1rem] gap-2">
        <h1 class="font-medium lg:text-[2rem] text-[#141414] mx-auto text-[1.25rem]">
          {{ $t('pages.newsList') }}
        </h1>
        <div class="flex flex-col">
          <NuxtLink
            class="max-w-[51.625rem] w-full flex cursor-pointer group justify-between gap-[1.25rem] lg:py-[2.5rem] max-lg:py-[.5rem] mx-auto border-b last:border-none"
            v-for="(i, k) in newsList"
            :key="k"
            :to="toDetail(i)"
          >
            <!-- lg:w-[10.75rem] lg:h-[5rem] rounded-[.25rem] flex-none overflow-hidden aspect-[10.75/5] -->
            <div class="lg:w-[40%] max-lg:w-1/3 aspect-video rounded-[.25remx] overflow-hidden flex-none border">
              <img
                loading="lazy"
                v-lazy="$globalFn.imgPrefixUrl(i.cover, 'article')"
                class="group-hover:scale-110 object-cover w-full h-full duration-300"
                alt="News article thumbnail"
                title="Article preview image"
              />
            </div>
            <div class="flex flex-col flex-1 justify-between">
              <div class="flex flex-col lg:gap-[.375rem] justify-between">
                <h2
                  class="font-medium text-left lg:text-[1.125rem] max-lg:text-[0.88rem] text-[#262626] line-clamp-1 group-hover:text-[#FF4E33] group-hover:underline group-hover:underline-offset-4 duration-300"
                >
                  {{ i.title }}
                </h2>
                <p class="font-normal text-left text-[.875rem] text-[#666666] line-clamp-3 lg:block hidden">
                  {{ i.description }}
                </p>
              </div>
              <div class="flex justify-between items-center">
                <div class="flex gap-[.625rem] items-center">
                  <!-- <span
                    class="font-medium lg:text-[.875rem] max-lg:text-[0.63rem] text-[#999999]"
                  >
                    {{ i.keywords }}
                  </span> -->
                  <div class="lg:size-8 size-6 overflow-hidden rounded-full">
                    <img loading="lazy" v-lazy="i.author.avatar" class="size-full object-cover" alt="Author avatar" title="Article author profile" />
                  </div>
                  <span class="font-medium text-[.875rem] text-black/50 ml-[.2rem]">
                    {{ i.author.nickname }}
                  </span>
                </div>
                <span class="font-medium lg:text-[.875rem] text-[#999999] max-lg:text-[0.63rem]"> {{ i.publish_time_text }}</span>
              </div>
            </div>
          </NuxtLink>
          <div class="pt-8">
            <no-data v-if="newsList.length == 0" type="search"></no-data>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsPage',
    head() {
      return {
        title: 'SEALMG News - Tournaments, Promotions & Announcements',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Get the latest updates on tournaments, promotions, and announcements at SEALMG. Discover game top-ups, vouchers, and more.'
          }
        ]
      }
    },
    data() {
      return {
        newsList: [], // 新闻列表数据
        name: '', // 名称
        params: [] // 路由参数
      }
    },
    async asyncData({ app, params }) {
      const code = params.code || ''
      const res = await app.$axios.get(`/api/news/list`, {
        params: {
          cid: '',
          code,
          page: 1,
          limit: 999
        }
      })
      return { newsList: res, params }
    },
    methods: {
      // 去新闻详情页
      toDetail(item) {
        let code = item.code
        code = code.replace(/\s+/g, '-')
        let path = this.localePath(`/news/${code}`)
        return path
      }
    }
  }
</script>
<style lang="less" scoped>
  .banxin {
    @apply max-w-7xl;
  }
</style>
